<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root" :x="n">
			<h2 :style="{opacity:opacity}">欢迎学习Vue1</h2>
			<!-- 由于是表达式，属性和值是写法如何一样，可以省略为一样-->
			<h2 :style="{opacity}">欢迎学习Vue2</h2>
		</div>
	</body>
	
	<script type="text/javascript">
			Vue.config.productionTip=false;
			/*
			 实现一个标题标题渐变的一个效果
			*/
			let vm = new Vue({
				el:'#root',
				// 与直接使用el不同的是，使用template进行渲染的话，只能存在一个根节点
				/*
				 这意味着你无法在模版里写这样
				 <h2 :style="{opacity:opacity}">欢迎学习Vue1</h2>
				<h2 :style="{opacity}">欢迎学习Vue2</h2>
				 这就两个根节点了

				 第二点，el 的渲染方式，将会直接将 id 为 root的
				 我们定义好的容器直接替换，不会保留 root的div
				 而el则会保留root的div，且会渲染绑定在root的属性
				*/
				template: `<div>
					<h2 :style="{opacity}">欢迎学习Vue2</h2>
					<div>`,
				// 函数式
				data:{
					opacity:1,
					n:1
				},
				beforeCreate() {
					
				},
				created() {
					
				},
				beforeMount() {
					
				},
				mounted(){
					// 生命周期函数 Vue 完成模版的解析并把真实的DOM元素放入页面后，调用这个函数
					// 这个调用，只会调用一次
					setInterval(() => {
						this.opacity -=0.01
						if(this.opacity<=0) this.opacity=1
					}, 16);
				},
				beforeUpdate() {
					// data 更新前调用
				},
				updated() {
					// 更新更新完毕
				},
				beforeDestroy() {
					// 当你调用了 vm.$destroy()
					/*
					该方法调用的时候，完全销毁一个实例
					清理它和其它实例的连接，
					解绑它的全部指令及事件监听器(自定义事件)

					需要注意的是，虽然beforeDestroy方法阶段
					vm还未对监听和连接进行解绑，意味着之前的方法
					还可以调用，但是涉及对data的一切操作
					都不再生效。不再进行beforeUpdate和updated的回调

					*/
					// beforeDesctory 和 destroyed,销毁vm
				},
				destroyed() {
					
				},
			});
	</script>
</html>
